<template>
  <div>
    <h1>App 根组件</h1>
    <hr/>

    <input type="text" class="form-control" v-if="inputVisible" ref="ipt"  />
    <button type="button" class="btn btn-primary" v-else @click="showInput" >展示 input 输入框</button>
  </div>
</template>

<script>
export default {
    name:'MyApp',
    data(){
        return {
            inputVisible:false
        }
    },
    methods:{
        showInput(){
            // 要展示文本框
            this.inputVisible=true
            
            // console.log(this.$refs.ipt) //undefind
            // 获取都文本框的引用对象,然后调用focus()方法
            // 报错:Cannot read properties of undefined
            // DOM更新是异步的,当执行 this.$refs.ipt.focus()代码时,DOM还没有完成更新
            //this.$refs.ipt.focus()

            // 组件的 $nextTick(cb)方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行
            this.$nextTick(()=>{
                  console.log(this.$refs.ipt)
                  this.$refs.ipt.focus()
            })
        
        }
    }
}
</script>

<style scoped lang="less" >
    input.form-control {
        width: 280px;
        display: inline;
        vertical-align: bottom;
    }
</style>